<template>
  <div>
    <template v-if="pageData.list.length">
      <div class="overall-table-surround">
        <div class="overall-table-surround-options">
          <div class="overall-table-surround-options-left">
            <el-button size="mini" plain type="warning" icon="el-icon-refresh"
              >全选</el-button
            >
            <el-button size="mini" plain type="danger" icon="el-icon-refresh"
              >批量删除</el-button
            >
            <el-button
              size="mini"
              plain
              type="danger"
              icon="el-icon-refresh"
              @click="clickEmptySecret"
              >清空密钥</el-button
            >
          </div>
        </div>
        <div class="overall-table-surround-table">
          <el-table :data="pageData.list">
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="type" label="类型" width="60" align="center">
            </el-table-column>
            <el-table-column prop="token" label="密钥">
              <template slot-scope="scope">
                <el-link type="primary">
                  <span class="secret">{{ scope.row.token }}</span></el-link
                >
              </template>
            </el-table-column>
            <el-table-column prop="create_date" label="创建时间" width="140">
            </el-table-column>
            <el-table-column prop="expired_date" label="过期时间" width="140">
            </el-table-column>
            <el-table-column prop="comment" label="说明" width="90">
            </el-table-column>
            <el-table-column
              prop="state"
              fixed="right"
              label="状态"
              align="center"
              width="60"
            >
              <template slot-scope="scope">
                <el-tag type="success" size="mini" effect="plain">{{
                  $dictionary.extend("SECRET_STATE", scope.row.state)
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              fixed="right"
              label="操作"
              width="60"
              align="center"
            >
              <template slot-scope="scope">
                <div class="overall-table-options overall-flex">
                  <el-link type="danger" @click="clickRemoveSecret(scope.row)"
                    >删除</el-link
                  >
                </div>
              </template></el-table-column
            >
          </el-table>
        </div>
      </div>
      <div class="overall-table-pagination">
        <div class="overall-table-pagination-left">
          <el-select v-model="pageData.limit" placeholder="请选择" size="mini">
            <el-option
              v-for="item in pageLimit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="overall-table-pagination-right">
          <el-pagination background layout="prev, pager, next" :total="pageData.total">
          </el-pagination>
        </div>
      </div>
    </template>
    <template v-else>
      <el-empty description="暂无记录"></el-empty>
    </template>
  </div>
</template>

<script>
import tableAttrMixin from "@/mixins/table_attr";
import ManageAPI from "@/api/manage";
export default {
  mixins: [tableAttrMixin],
  data() {
    return {
      userid: null,
      userSecretList: [],
      pageData: {
        page: 1,
        limit: 10,
        total: null,
        where: {
          mobile: "",
          username: "",
          nickname: "",
          gender: null,
          state: null,
          role: null,
        },
        list: [],
      },
    };
  },
  created() {
    let { userid } = this.$route.query;
    this.userid = userid;
    this.getUserActive();
  },
  methods: {
    clickRemoveSecret(row) {
      console.log(row);

      let secretId = row.id

      this.$confirm("此操作将永久删除密钥, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return ManageAPI.removeUserToken({user:this.userid,id:secretId});
        }, () => {
          return new Promise()
        })
        .then(
          (res) => {
             console.log(res);
            this.$message({
              message: res.msg,
              type: "success",
            });
          },
          (err) => {
            console.log(err);
            if (err && err.msg) {
              this.$message({
                message: err.msg,
                type: "error",
              });
            }
          }
        );
    },
    getUserActive() {

      let userid = this.userid;
      ManageAPI.getUserTokenList({ user: userid })
        .then((res) => {
          let {list,total} = res.data
          this.pageData.list = list
          this.pageData.total = total
        })
        .catch((err) => {
          this.$message({
            message: err.msg,
            type: "error",
          });
        });
    },
    // 点击清空密钥
    clickEmptySecret() {
      this.$confirm("此操作将永久删除密钥, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let userid = this.userid;
          return ManageAPI.emptyUserToken({ user: userid });
        }, () => {
          return new Promise()
        })
        .then(
          (res) => {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.userSecretList = [];
          },
          (err) => {
            this.$message({
              type: "error",
              message: err.msg,
            });
          }
        );
    },
  },
};
</script>

<style>
.secret {
  width: 200px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
